// home
import React, { Component } from "react";
import { Route, Link } from "react-router-dom";
import { Badge, TabBar } from "antd-mobile";
import { AppOutline, MessageOutline, MessageFill, UnorderedListOutline, UserOutline } from "antd-mobile-icons";
import News from "./News";
import './Home.css' 

export default class Home extends Component {
  render() {
    const tabs = [
      {
        key: "home",
        title: "首页",
        // icon: <AppOutline />,
        icon: <i className='iconfont icon-fangzi'></i>,
        badge: Badge.dot,
      },
      {
        key: "todo",
        title: "找房",
        // icon: <UnorderedListOutline />,
        icon: <i className='iconfont icon-chaxun' />,
        badge: "5",
      },
      {
        key: "message",
        title: "咨询",
        // icon: (active) => (active ? <MessageFill /> : <MessageOutline />),
        icon: <i className='iconfont icon-fangzi'></i>,
        badge: "99+",
      },
      {
        key: "personalCenter",
        title: "我的",
        // icon: <UserOutline />,
        icon: <i className='iconfont icon-haoyou'/>,
      },
    ];
    return (
      <div>
        home组件！<br></br>
        <News />
        跳转到<Link to="/home/news">news</Link>
        <Route path="/home/news" component={News} />
        {/* 开始写内容 */}
        <TabBar>
          {tabs.map((item) => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </div>
    );
  }
}
